<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.min.js"></script>
    <title>事件的基本使用</title>
</head>
<body>
    <!-- 
        事件的基本使用：
            1.使用v-on：xxx或者@xxx绑定事件，xxx是事件名。
            2.事件的回调需要配置在methods对象中，最终会在vm中。
            3.methods中配置的函数，不要使用箭头函数，否则this就不是vm了，而是window了。
            4.methods中配置的函数，都是被vue所管理的函数，this的指向是vm或者组件实例对象。
            5.@click="demo" 和 @click="demo($event)"效果一致，但是可以传参。
     -->
    <div id="root">
        <h1>欢迎来到{{name}}学习</h1>
        <!-- <button v-on:click="show">按钮</button> -->
        <button @click="show1">按钮1</button>
        <button @click="show2(123456)">按钮2</button>
    </div>

    <script>
        const vm = new Vue({
            el:'#root',
            data:{
                name:'狗蛋'
            },
            methods:{
                show1(){
                    alert('123');
                    // console.log(this === vm);//此处的this就是vm，vue实例对象
                },
                show2(num){
                    alert(num);
                }
            }
        });
    </script>
</body>
</html>